<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>部门列表</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
  <div class="row mb-3">
    <div class="col">
      <h1>部门列表</h1>
    </div>
    <div class="col text-right">
      <a href="/" class="btn btn-secondary">返回首页</a>
    </div>
  </div>

  <div class="mb-3">
    <a th:href="@{/departments/add}" class="btn btn-primary">添加部门</a>
  </div>

  <div class="table-responsive">
    <table class="table table-striped table-bordered">
      <thead class="thead-dark">
      <tr>
        <th>ID</th>
        <th>部门名称</th>
        <th>描述</th>
        <th>操作</th>
      </tr>
      </thead>
      <tbody>
      <tr th:each="dept : ${departments}">
        <td th:text="${dept.deptId}"></td>
        <td th:text="${dept.deptName}"></td>
        <td th:text="${dept.description}"></td>
        <td>
          <a th:href="@{/departments/edit/{id}(id=${dept.deptId})}" class="btn btn-sm btn-info">编辑</a>
          <a th:href="@{/departments/delete/{id}(id=${dept.deptId})}" 
             class="btn btn-sm btn-danger"
             onclick="return confirm('确定要删除这个部门吗？')">删除</a>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>